<template>
  <!-- 电池堆 配置 -->
  <a-form
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    layout="vertical"
    ref="formRef"
    :rules="rules"
    :disabled="!configData.isEdit"
  >
    <a-form-item label="电池堆名称" name="linkName">
      <a-input v-model:value="form.linkName" class="formInput" />
    </a-form-item>
    <a-form-item label="电池堆资产编码" name="linkAssertCode">
      <a-input v-model:value="form.linkAssertCode" class="formInput" />
    </a-form-item>
    <a-form-item label="唯一标识/设备序列号" name="linkIdx">
      <a-input v-model:value="form.linkIdx" class="formInput" />
    </a-form-item>
    <a-form-item label="是否主ccu" name="isMain">
      <a-select class="formSelect" v-model:value="form.isMain">
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="电池簇1名称"
      :name="['blockIdList', 0, 'blockName']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.blockIdList[0].blockName"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      label="电池簇1唯一标识"
      :name="['blockIdList', 0, 'blockIdx']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input v-model:value="form.blockIdList[0].blockIdx" class="formInput" />
    </a-form-item>
    <a-form-item
      label="电池簇1资产编码"
      :name="['blockIdList', 0, 'blockAsserCode']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.blockIdList[0].blockAsserCode"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      label="电池簇2名称"
      :name="['blockIdList', 1, 'blockName']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.blockIdList[1].blockName"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      label="电池簇2唯一标识"
      :name="['blockIdList', 1, 'blockIdx']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input v-model:value="form.blockIdList[1].blockIdx" class="formInput" />
    </a-form-item>
    <a-form-item
      label="电池簇2资产编码"
      :name="['blockIdList', 1, 'blockAsserCode']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.blockIdList[1].blockAsserCode"
        class="formInput"
      />
    </a-form-item>
    <a-form-item label="PACK数量/电池簇" name="packNum">
      <a-input v-model:value="form.packNum" class="formInput" />
    </a-form-item>
    <a-form-item label="电芯数量/PACK" name="cellNum">
      <a-input v-model:value="form.cellNum" class="formInput" />
    </a-form-item>
    <a-form-item label="充电桩电表名称" name="chargingMeterName">
      <a-input v-model:value="form.chargingMeterName" class="formInput" />
    </a-form-item>
    <a-form-item
      label="充电枪1名称"
      :name="['chargingList', 0, 'chargingGunName']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.chargingList[0].chargingGunName"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      label="充电枪1对应sn"
      :name="['chargingList', 0, 'chargingSn']"
      :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
    >
      <a-select
        class="formSelect"
        v-model:value="form.chargingList[0].chargingSn"
        allowClear
        @change="changeChargingSn"
      >
        <a-select-option :value="0">0</a-select-option>
        <a-select-option :value="1">1</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="充电枪2名称"
      :name="['chargingList', 1, 'chargingGunName']"
      :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
    >
      <a-input
        v-model:value="form.chargingList[1].chargingGunName"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      label="充电枪2对应sn"
      :name="['chargingList', 1, 'chargingSn']"
      :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
    >
      <a-select
        class="formSelect"
        v-model:value="form.chargingList[1].chargingSn"
        allowClear
        @change="changeChargingSnSecond"
      >
        <a-select-option :value="0">0</a-select-option>
        <a-select-option :value="1">1</a-select-option>
      </a-select>
    </a-form-item>
  </a-form>
  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button v-if="!configData?.isEdit" type="primary" @click="handleEdit"
      >编辑</a-button
    >
    <a-button
      v-else
      type="primary"
      @click="onSubmit"
      :loading="stionConfigState.configDataSaveLoading"
      >保存</a-button
    >
  </a-form-item>
</template>
<script setup>
;
import { useStionConfigStore } from "@/stores/stationConfig";
const { stionConfigState, changeConfigData } = useStionConfigStore();
import { EQUIP_TYPE } from "@/constants/stationConfig";
import { cloneDeep } from "lodash-es";
const configData = computed(() => stionConfigState.configData);
const emits = defineEmits(["getConfig"]);
const props = defineProps({
  rowData: {
    type: Object,
  },
  elements: {
    type: Array,
  },
});
watch(
  () => stionConfigState.configData,
  async (val) => {
    form.value = {
      linkName: null,
      linkAssertCode: null,
      linkIdx: null,
      isMain: null,
      packNum: null,
      cellNum: null,
      chargingMeterName: null,
      blockIdList: [
        { blockName: null, blockIdx: null, blockAsserCode: null },
        { blockName: null, blockIdx: null, blockAsserCode: null },
      ],
      chargingList: [
        { chargingGunName: null, chargingSn: null },
        { chargingGunName: null, chargingSn: null },
      ],
      ...stionConfigState.configData
    };
    
    if (stionConfigState.configData.assetCode?.length) {
      form.value.linkAssertCode = stionConfigState.configData.assetCode[0];
      form.value.blockIdList[0].blockAsserCode =
        stionConfigState.configData.assetCode[1];
      form.value.blockIdList[1].blockAsserCode =
        stionConfigState.configData.assetCode[2];
    }
  },
  { deep: true }
);
const $api = inject("$api");
const form = ref({
  linkName: null,
  linkAssertCode: null,
  linkIdx: null,
  isMain: null,
  packNum: null,
  cellNum: null,
  chargingMeterName: null,
  blockIdList: [
    {
      blockName: null,
      blockIdx: null,
      blockAsserCode: null,
    },
    {
      blockName: null,
      blockIdx: null,
      blockAsserCode: null,
    },
  ],
  chargingList: [
    {
      chargingGunName: null,
      chargingSn: null,
    },
    {
      chargingGunName: null,
      chargingSn: null,
    },
  ],
});
const rules = {
  linkName: [{ required: true, message: "请输入", trigger: "blur" }],
  linkAssertCode: [{ required: true, message: "请输入", trigger: "blur" }],
  linkIdx: [{ required: true, message: "请输入", trigger: "blur" }],
  isMain: [{ required: true, message: "请选择", trigger: "change" }],
  packNum: [{ required: true, message: "请输入", trigger: "blur" }],
  cellNum: [{ required: true, message: "请输入", trigger: "blur" }],
  chargingMeterName: [{ required: true, message: "请输入", trigger: "blur" }],
};
const formRef = ref(null);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      form.value.type = EQUIP_TYPE.CHONG_DIAN_ZHUANG;
      delete form.value.assetCode;
      emits("getConfig", toRaw(form));
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
const handleEdit = () => {
  changeConfigData({
    ...stionConfigState.configData,
    isEdit: true,
  });
};
const changeChargingSn = (val) => {
  form.value.chargingList[1].chargingSn = val === 0 ? 1 : 0;
};
const changeChargingSnSecond = (val) => {
  form.value.chargingList[0].chargingSn = val === 0 ? 1 : 0;
};
onMounted(async () => {});
</script>
<style lang="less" scoped>
.formInput {
  width: 175px;
  text-align: left;
}
.formSelect {
  width: 175px;
  text-align: left;
}
</style>